<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>新增模块</title>
    <link href="/after/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="/after/css/font-awesome.min.css?v=4.3.0" rel="stylesheet">
    <link href="/after/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="/after/css/animate.min.css" rel="stylesheet">
    <link href="/after/css/style.min.css?v=3.0.0" rel="stylesheet">

</head>

<body class="gray-bg">
<div id="app">
<div class="wrapper wrapper-content animated fadeInRight">


    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新增模块 <small>包括自定义样式的图片和内容列</small></h5>
                </div>
                <div class="ibox-content">
                    <form method="post" action="/test/filesUpload.do" class="form-horizontal" enctype="multipart/form-data">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">模块标题</label>
                            <div class="col-sm-10">
                                <input type="text" name="title" class="form-control" style="width: 20%">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">显示发布时间
                            </label>
                            <div class="col-sm-10">
                                <div class="checkbox i-checks">
                                    <label>
                                        <input type="checkbox" value="" disabled="" checked=""> <i></i> {{new Date()}} </label>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">布局格式</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label><img src="/before/bookImg/module1.jpg" width="300px" height="150px"><input type="radio" name="model" checked="" value="module1"> </label>
                                    <label><img src="/before/bookImg/module2.jpg" width="300px" height="150px"><input type="radio" name="model" value="module2"> </label>
                                    <label><img src="/before/bookImg/module3.jpg" width="300px" height="150px"><input type="radio" name="model" value="module3"> </label>
                                    <label><img src="/before/bookImg/module4.jpg" width="300px" height="150px"><input type="radio" name="model" value="module4"> </label>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group" id="content">
                            <label class="col-sm-2 control-label">选择内容</label>
                            <div class="col-sm-4 m-l-n">
                                <select class="form-control" name="typeId" >
                                    <option v-for="type in types" :value="type.id">{{type.type}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group" id="picture" style="display: none;">
                            <label class="col-sm-2 control-label">图片上传</label>
                            <div class="col-sm-10" id="pictureList">
                                <div class="col-sm-3">图片：<input type="file" name="files" class="form-control"></div>
                            </div>
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-10" id="button">
                                <div class="col-sm-4">
                                    <input type="button" id="addNewPicture" class="btn btn-white" value="新增一行"/>
                                    <input type="button" id="delOldPicture" class="btn btn-white" value="删除一行"/>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">链接方式</label>
                            <div class="col-sm-10" style="width: 20%">
                                <select class="form-control m-b" name="target">
                                    <option value="_self">当前窗口</option>
                                    <option value="_blank">新标签页</option>
                                    <option value="_parent">父窗口</option>
                                    <option value="_top">最外层窗口</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属界面</label>
                            <div class="col-sm-10" style="width: 20%">
                                <select class="form-control m-b" name="belongTo">
                                    <option value="index">首页</option>
                                    <option value="index">首页</option>
                                    <option value="index">首页</option>
                                    <option value="index">首页</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button class="btn btn-primary" type="submit">保存内容</button>
                                <button class="btn btn-white" type="submit">取消</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- 全局js -->
<script src="/after/js/jquery-2.1.1.min.js"></script>
<script src="/after/js/bootstrap.min.js?v=3.4.0"></script>
<!-- 自定义js -->
<script src="/after/js/content.min.js?v=1.0.0"></script>
<!-- iCheck -->
<script src="/after/js/plugins/iCheck/icheck.min.js"></script>
<!--Vue-->
<script src="/after/js/vue/vue.min.js"></script>

<script>
    //Vue
    var app = new Vue({
        el:'#app',
        data:{
            types:[]
        }
    })

    //初始化
    $(function(){
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });
        queryType();
        $("input[name='model']").onChange();
    })

    //查询所有类型
    var queryType = function (){
        $.ajax({
            type:"POST",
            dataType:"json",
            url:"/main/queryAllSType.do",
            success:function(msg){
                app.types = msg.stype;
                console.log(msg.stype);
            },error:function(){
                console.log("类型查询失败！");
            }
        })
    }

    $("input[name='model']").on('change',function(){
        switch($(this).val()){
            case "module1":
                $("#content").css("display","block");
                $("#picture").css("display","none");
                break;
            case "module2":
                $("#content").css("display","block");
                $("#picture").css("display","block");
                $("#button").css("display","none");
                break;
            case "module3":
                $("#content").css("display","none");
                $("#picture").css("display","block");
                $("#button").css("display","block");
                break;
            case "module4":
                $("#content").css("display","block");
                $("#picture").css("display","block");
                $("#button").css("display","block");
                break;
        }
    })

    $("#addNewPicture").on('click',function(){
        var $html = $('<div class="col-sm-3">新增图片：<input type="file" name="files" class="form-control"></div>');
        $("#pictureList").append($html);
    })

    //删不掉
    $("#delOldPicture").on('click',function(){

    })
</script>

</body>

</html>